<template>
  <div class="mt-1">
    <!-- 表单设计 -->
    <div v-if="formType === 1">
      <a-button type="primary"><template #icon><PlusSquareOutlined /></template>新增</a-button>
      <vxe-table v-if="tableshow" :data="dataModel.data">
        <vxe-table-column
          v-if="setting.options.serialNumberVisible"
          type="seq"
          title="序号"
          width="60"
        ></vxe-table-column>
        <vxe-table-column
          v-for="item in filedsetting"
          :key="item.field"
          :title="item.lable"
        ></vxe-table-column>
      </vxe-table>
    </div>
    <!-- 表单应用 -->
    <div v-else>
      <!-- 表单应用修改 -->
      <div v-if="setting.fieldState === 0">
        <a-button type="primary" @click="insertEvent"><template #icon><PlusSquareOutlined /></template>新增</a-button>

        <vxe-table
          v-if="tableshow"
          :key="tableTimer"
          show-footer
          :footer-method="footerMethod"
          :data="dataModel.data"
        >
          <vxe-table-column
            v-if="setting.options.serialNumberVisible"
            type="seq"
            title="序号"
            width="60"
          ></vxe-table-column>
          <template v-for="item in filedsetting">
            <vxe-table-column
              :key="item.field"
              :align="item.algin"
              v-if="item.isVisible"
              :width="item.width"
              :title="item.lable"
            >
              <template v-slot="{ row }">
                <table-item-comp
                  @handleTotal="updateFooterEvent"
                  :key="item.columnName"
                  :widget="item.setting"
                  :models="row"
                ></table-item-comp>
              </template>
            </vxe-table-column>
          </template>
          <vxe-table-column align="center" width="100" title="操作">
            <template v-slot="{ row }">
              <a @click="deleteTable(row)">删除</a>
            </template>
          </vxe-table-column>
        </vxe-table>
      </div>
      <!-- 表单应用只读 -->
      <div v-else>
        <vxe-table
        v-if="tableshow"
          :key="tableTimer"
          show-footer
          :footer-method="footerMethod"
          :data="dataModel.data"
        >
          <vxe-table-column
            type="seq"
            align="center"
            title="序号"
            width="60"
          ></vxe-table-column>

          <template v-for="item in filedsetting">
            <vxe-table-column
              :key="item.field"
              :align="item.algin"
              v-if="item.isVisible"
              :width="item.width"
              :title="item.lable"
            >
              <template v-slot="{ row }">
                <table-item-comp
                  :key="item.columnName"
                  :widget="item.setting"
                  :models="row"
                ></table-item-comp>
              </template>
            </vxe-table-column>
          </template>
        </vxe-table>
      </div>
    </div>
  </div>
</template>
<script>
  import TableItemComp from './tableItemComp'
 import XEUtils from 'xe-utils'
  import { PlusSquareOutlined} from '@ant-design/icons-vue'
  export default {
    components: {
      TableItemComp,
      PlusSquareOutlined
    },
    data() {
      return {
        dataModel:
          this.models.subtable === undefined
            ? { data: [] }
            : this.models.subtable[this.setting.options.linktable],
        tableItem: {},
        tableTimer: '',
        filedsetting: [],
        tableshow: false,
      }
    },

    props: {
      formType: {
        type: Number,
        default: 0,
      },
      setting: {
        type: Object,
        default: null,
      },

      models: {
        type: Object,
        default: Object,
      },
    },
    created() {
      setTimeout(() => {
        this.tableshow = true
      }, 500)
      if (this.dataModel === undefined) {
        this.dataModel = {
          data: [],
        }
      }
      if (this.setting.options.tableSetting !== undefined) {
        // 数组排序
        this.filedsetting = JSON.parse(
          JSON.stringify(this.setting.options.tableSetting)
        )
        this.filedsetting.sort((a, b) => a.sort - b.sort)
      }

      this.tableItem = {
        field: this.setting.field,
        linktable: this.setting.options.linktable,
        associatedFields: this.setting.options.associatedFields,
        fromtablekey: this.setting.options.fromtablekey,
      }
    },
    methods: {
      // 在值发生改变时更新表尾合计
      updateFooterEvent() {
        this.tableTimer = new Date().getTime()
      },
      // 表尾合计
      footerMethod() {
        var that = this
        var totalResult = ['合计']
        that.setting.options.tableSetting.forEach((column) => {
          if (column.isVisible) {
            if (column.setting.isTotal) {
              totalResult.push(
                XEUtils.sum(
                  that.dataModel.data,
                  column.setting.table + '-' + column.setting.field
                )
              )
              if (column.setting.associatedFields !== undefined) {
                // eslint-disable-next-line vue/no-mutating-props
                this.models[
                  this.setting.table + '-' + column.setting.associatedFields
                ] = XEUtils.sum(
                  that.dataModel.data,
                  column.setting.table + '-' + column.setting.associatedFields
                )
              }
            } else {
              totalResult.push(null)
            }
          }
        })
        return [totalResult]
      },
      insertEvent() {
        const record = {}
        this.dataModel.data.push(record)
      },
      deleteTable(row) {
        // 删除数组中的对象
        const Fields = [...this.dataModel.data]
        this.dataModel.data = Fields.filter((item) => item._XID !== row._XID)
        this.tableTimer = new Date().getTime()
      },
    },
    watch: {
      'dataModel.data': {
        deep: true,
        handler(val) {
          this.tableItem.data = val
          // eslint-disable-next-line vue/no-mutating-props
          this.models.subtable[this.setting.options.linktable] = this.tableItem
        },
      },
    },
  }
</script>
